HTML Export Test

This page contains all the special fancy formatting I use on my website, so that I can easiely chack if any changes to the compile.el script or the stylesheet messed something up. It is also somewhat self-documenting, but that is only useful if you view the source org file. Otherwise you will not find anything interesting here.

Basics

Here is some code:

pub fn main() !u8 {
    return 0;
}

And here is some blind-text:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is centered text.

Fun fact: Making the center-block actually emit a <center> element required some work, since by default it's just a <div> with the org-center class. Why? No idea…

This is an info box. It can contain text and code.

I usually use this to add an anectdote, an explanation, some context or sometimes even updates to existing articles I don't wish to edit.

int main (void)
{
        return EXIT_SUCCESS;
}

There is also another type of box:

This is a "double box". It's just like an info-box, just with double borders. It isn't used very often just for a few special things.

It too can contain code:

for file in *
do
    echo "$file"
done

Wow, that code looks very useful!

Let's try some iamges! Since I decide on a case-by-case basis how wide the images should be compared to the surrounding text, the stylesheet does not define a width for <img/> elements; The width needs to be set in the org soure manually.

Let's make it smaller!

I just borrowed an image from my DIY pinhole photogracy article. I am lazy, so I'll reuse this everywhere on this test page.

Let's try text next to the image!

Getting the side-by-side stuff right was quite annoying at first, but eventually I just added dedicated elements for the things I special-cased before; That removed most of the headaches.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Let's try it the other way around!

Images in these side-by-side things need to have a width of 100%, so that the column size is determined based on the text.

Here is some more blind text to find out what happens if the text is a bit longer than the image:

What about images in boxen?

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

How about text next to a box?

The vertical alignment of boxen next to text wasn't entirely trivial, but after cleaning up the style, it works as intended!

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Does this break if there is a only single <p> next to the box?

Test test test test test test

Let's try some lists and footnotes¹:

List
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- sub-item²
item
item

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a blockquote.

I am not yet sure about the style. Maybe it would look better with a grey background, but I want to use that sparingly since it's just not the kind of style I am going for on my site. It would look way to contemporary.

The following is a verse-block. It preserves line breaks'n'stuff. I would be genuinely surprised if I ever used it, but here it is anyway. If I have access to it, I may as well style it 🤷‍♀️. I decided to increase the line height a bit, since that seems to be a common way to present poetry.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.

This is a "melancholic" content. Pretentious, I know. Just couldn't find a better name in the like 30 seconds I thought about it when I wanted this for a post. The idea is to use this to add some emotional spice to posts, maybe.

Text inside this element will always follow an image. If there ever is a code exmaple or a box nested inside this, something went very wrong and I probably should take a step back.

I should probably add some fancy hand-drawn SVG borders or something.

A	B
C	D
E
F	20
A	B

Footnotes:

hello

Test

A footnote on a header

HTML Export Test

Basics

A header

Sub header 3

A Sub-sub header

Let's test a table

Footnotes:

HTML Export Test

Basics

A header

Sub header3

A Sub-sub header

Let's test a table

Footnotes:

Sub header 3